<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <!--            搜索条件-->
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="名称">
                <a-input v-model="queryParam.name" placeholder="" />
              </a-form-item>
            </a-col>
            <a-button type="primary" @click="$refs.table.refresh(true)"
            >查询</a-button
            >
            <a-button
                    style="margin-left: 8px"
                    @click="() => (this.queryParam = {})"
            >重置</a-button
            >


          </a-row>
        </a-form>
      </div>

      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
      <!-- 表格数据-->
      <s-table
        ref="table"
        size="default"
        :rowKey="rowKey"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
      >



        <span slot="action" slot-scope="text, record">
          <template>
            <a @click="handleEdit(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDel(record)">删除</a>
          </template>
        </span>
      </s-table>
      <!--新建表单-->
      <form-page
        ref="form"
        :visible="visible"
        :loading="confirmLoading"
        :model="mdl"
        @cancel="handleCancel"
        @ok="handleOk"
      />
      <!--            <step-by-step-modal ref="modal" @ok="handleOk"/>-->
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import {  saveDataSource,putDataSource,delDataSource,getDbList } from '@/api/gen'


import FormPage from './DbForm'

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
  },
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '用户名',
    dataIndex: 'username',
  },
  {
    title: 'url',
    dataIndex: 'url'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    sorter: true
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]



export default {
  name: 'Gen',
  components: {
    STable,
    Ellipsis,
    FormPage,
  },
  data() {
    this.columns = columns
    return {
      rowKey: 'id',
      // create model
      visible: false,
      confirmLoading: false,
      mdl: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        console.log('loadData request parameters:', requestParameters)
        return getDbList(requestParameters).then((res) => {
          return res.data
        })
      },
    }
  },

  methods: {
    handleAdd() {
      this.mdl = null
      this.visible = true
      this.$refs.form.editOptions({title:'新增数据源',action:'create'})
      console.log( this.$refs.form.validateRules)
    },
    handleEdit(record) {
      this.visible = true
      this.mdl = { ...record }
      this.$refs.form.editOptions({title:'修改数据源',action:'update'})
      console.log( this.$refs.form.validateRules)
    },
    handleOk() {
      const form = this.$refs.form.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {

        if (!errors) {
          console.log('values', values)
          if (values.id > 0) {
            // 修改 e.g.
            this.openNetLazyLoading().then((res) => {
              putDataSource(values).then(res=>{
                if (res.code&&res.code!==200){
                  this.$message.error(res.message);
                  this.confirmLoading = false
                }else{
                  this.visible = false
                  this.confirmLoading = false
                  // 重置表单数据
                  form.resetFields()
                  // 刷新表格
                  this.$refs.table.refresh()
                  this.$message.info('修改成功')
                }
              }).catch(err=>{
                this.$message.info('网络异常')
                this.confirmLoading = false
              })

            })
          } else {
            // 新增
            this.openNetLazyLoading().then((res) => {
              //执行请求
              saveDataSource(values).then(res=>{
                console.log(res)
                if (res.code&&res.code!==200){
                  this.$message.error(res.message);
                  this.confirmLoading = false
                }else{
                  this.visible = false
                  this.confirmLoading = false
                  // 重置表单数据
                  form.resetFields()
                  // 刷新表格
                  this.$refs.table.refresh()
                  this.$message.info('新增成功')
                }
              }).catch(err=>{
                this.$message.info('网络异常')
                this.confirmLoading = false
              })

            })
          }
        } else {
          console.log("errors",errors)
          this.confirmLoading = false
        }
      })
    },

    openNetLazyLoading(delay=1000){
      return  new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, delay)
      })
    },
    handleCancel() {
      this.visible = false
      const form = this.$refs.form.form
      form.resetFields() // 清理表单数据（可不做）
    },
    handleDel(record) {
      delDataSource(record.id).then(res=>{
        if (res.code&&res.code!==200){
          this.$message.error(res.message);
        }else{
          // 刷新表格
          this.$refs.table.refresh()
          this.$message.info(`删除成功`)
        }
      }).catch(err=>{
        this.$message.info('网络异常')
        this.confirmLoading = false
      })
    },


    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
  },
}
</script>
